<template>
  <v-scale-screen width="100vw" height="100vh">
    <!--页面内容-->
    <div class="main" :style="mainStyle">
      <!-- 头部标题 -->
      <!-- subTitle="企业风险作业员工操作行为数字化" -->

      <Head :softName="softName" :isBack="true" :isOnly="isOnly"></Head>
      <div class="body">
        <router-view />
      </div>
    </div>
  </v-scale-screen>
</template>

<script>
import VScaleScreen from "v-scale-screen";
import Head from "@/components/ScreenCommon/Head";
export default {
  components: { VScaleScreen, Head },
  data() {
    return {
      softName: "",
      port: "",
      isOnly: false,
    };
  },
  computed: {
    mainStyle() {
      const name = this.$route.name;
      if (name === "home") {
        return {
          backgroundImage: `radial-gradient(52.5% 165.94% at 45.93% 45.33%, rgba(2, 7, 19, 0) 34.32%, #000C2F 100%), url(${require("@/assets/home-bg.png")})`,
        };
      }
      return {};
    },
  },
  created() { },
  mounted() { },
  methods: {
    isTest() {
      console.log("测试");
    },
  },
  watch: {
    $route: {
      handler: function (nVal, oVal) {

        this.isOnly = false;
        if (
          nVal.name &&
          ["Work", "OnePort", "OneType"].includes(nVal.name) &&
          Object.keys(nVal.query).length > 0
        ) {
          if (nVal.name == "Work") {
            this.softName = nVal.query.port || "山东港口";
          } else {
            this.softName = nVal.query.port || nVal.query.type || "";
          }
        } else if (
          nVal.name &&
          ["Work", "Port"].includes(nVal.name) &&
          Object.keys(nVal.query).length == 0
        ) {
          this.softName = "山东港口";
        } else if (nVal.name && ["Real"].includes(nVal.name) && nVal.query.type) {
          if (nVal.query.type == "real") {
            this.softName = "风险作业管控";
            this.isOnly = true;
          } else if (nVal.query.type == "hidden") {
            this.softName = "隐患排查治理";
            this.isOnly = true;
          }
        } else {
          this.softName = "";
        }
        // this.softName = `${this.softName}${this.softName ? '-' : ''}`
      },
      // 设置为深度监听
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: linear-gradient(89.58deg, #020713 0.38%, #1e3058 51.25%, #010712 98.12%);
  padding-bottom: 20px;
  color: #ccc;

  .header {
    width: 100%;
    height: 125px;
    background: url("~@/assets/svg/header.svg") center top no-repeat,
      linear-gradient(180deg, #020813 0%, rgba(2, 8, 19, 0) 94.93%);
  }

  .body {
    width: 100%;
    flex: 1;
    overflow: hidden;
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 58px;
    background: transparent;

    &:hover {
      .footer-router {
        // transition-duration: 0.1s;
        // transition-delay: 0s;
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }

    .footer-router {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(6px);
      transform: translate3d(0, 58px, 0);
      opacity: 0;
      user-select: none;

      .left,
      .right {
        display: inline-block;
        width: 22px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        cursor: pointer;
      }

      .page {
        margin: 0 16px;

        .page-item {
          display: inline-block;
          width: 23px;
          height: 23px;
          line-height: 22px;
          text-align: center;
          cursor: pointer;
          color: #fff;
          transition: background 0.3s linear;
          border-radius: 2px;

          &.page-item-active {
            background: var(--primary-color);
          }
        }

        .page-item+.page-item {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
